@import 'colors';
@import 'values';
@import 'fonts';
@import 'mixins';

@import 'common';
@import 'menu';
@import 'form';

body {
    height:100%;
    font: 16px 'PT Sans Narrow';
    background: image-url('body.png');

    h1 {
        a {
            text-decoration: none;
        }
    }

    h2 {
        color:rgba($grey, 0.7);
        background: image-url('h2-border.png') repeat-x 0 center;

        >span {
            padding:5px 20px;
            background:white;
            margin-left:20px
        }

        a {
            text-decoration:none;
            color:rgba($grey, 0.7)
        }
    }

    .breadcrumbs {
        a {
            color:rgba($grey, 0.6);

            &:hover {

            }
        }
    }

    header {
        background: $violet;
        height:$header-height;
        @include inner-shadow(0, -7px, 10px, rgba(black, 0.4));
        transition: 0.5s all;

        .width-container {
            position:relative;

            #logo {
                float:left;
                margin-right:10px;
                height:$header-height;
                overflow:hidden;

                img {
                    padding:14px 30px 0 4px;
                }
            }

            .languages {
                position:absolute;
                right:5px;
                top:10+$header-height;

                a {
                    color:$violet;
                    text-decoration: none;
                    display: inline-block;
                    padding:2px 4px;

                    &.selected {
                        background:$violet;
                        color:white
                    }
                }
            }
        }
    }

    .price {
        font-weight:bolder;
        font-size:1.5em;
        background:$pink;
        color:white;
        padding:4px 8px;
        display:inline-block;

        .currency {
            font-size:0.8em;
            font-weight:normal;
            display:inline-block;
            margin-left:5px
        }
    }

    #main {
        color:$grey;

        >.width-container {
            width: 760px;
            min-height: 600px;
            padding:20px;
            background:white;
            @include box-shadow(0, 0, 10px, $grey);
        }

        .submenu {
            list-style:none;
            background:rgba($grey, 0.3);
            padding:0 10px;
            margin:0 0 20px;

            li {
                display:inline-block;

                a {
                    display:block;
                    padding: 5px 10px;
                    text-decoration:none;
                    color:$grey;
                    text-transform: uppercase;

                    &:hover, &.selected {
                        background:$violet;
                        color:white;
                    }
                }
            }
        }

        form {
            input, textarea {
                font-size:18px;
            }
        }

        .captcha {
            float:left;

            label {
                display:inline-block;
                margin-right:5px
            }

            input {
                width:60px;
                text-align:center;
            }

            img {
                height:26px;
                vertical-align: middle
            }
        }

        ul.products {
            list-style:none;
            margin-bottom:30px;
            float:left;
            width:100%;
            clear:both;
            overflow: hidden;

            li {
                display:block;
                float:left;
                width:30%;
                margin-right:5%;
                text-align:center;

                &:nth-child(2n+1) {
                    margin-right:0
                }

                img {
                    height:200px;
                }

                h3 {
                    font-weight:normal;
                    font-size: 24px;
                }

                .price {
                    font-size:1em;
                    color:$grey;
                    padding:0;
                    background:none
                }
            }
        }
    }

    footer {
        clear:both;
        text-align: center;

        >.width-container {
            padding:30px 0;
            background:$grey;
            color:white;
            @include box-shadow(0, 2px, 4px, $grey)
        }
    }
}

.scroll {
    body {
        padding-top:0.66*$header-height;
        
        header {
            position:fixed;
            left:0;
            top:0;
            width:100%;
            z-index:9999;
            height:0.66*$header-height;

            #logo {
                height:0.66*$header-height;

                img {
                    height:0.45*$header-height;
                    padding:7px 10px 0 4px
                }
            }

            menu {
                li {
                    a {
                        line-height:0.66*$header-height;
                    }
                }
            }
        }
    }
}

@import 'tablet';
@import 'mobile';